$cube-translate: .8rem;
$cube-translate-active: 1.6rem;

@keyframes rotate {
	0%{
		transform:rotateX(0deg) rotateY(0deg);
	}
	100%{
		transform:rotateX(360deg) rotateY(360deg);
	}
}
@keyframes scales {
	0%{
		opacity: 0;
		transform: scale(0);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.wrap {
	position: relative;
	height: 100%;
	background: linear-gradient(#d005e4, #7548c9);
	background-image: url(./images/4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.bg  {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	background-image: url(./images/4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	filter: blur(8px);

	transition: all .3s ease-in-out ;
}
.blur {
	filter: blur(0px);
}
.cube-wrap{
	height: 100vh;
	display: flex;
	align-items: center;
	perspective: 20rem; 
	transform: scale(0);
	animation: scales .6s forwards ease-in-out 0s;
}
.cube{
  margin: 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	position: relative;
	color: #fff;
	transform-style: preserve-3d;
	animation: rotate 16s infinite linear; 
}
.cube .div{
	width: 100%;
	height: 100%;
	position: absolute;
	box-shadow: 0 0 .3rem currentColor;
	transition: all 0.4s;
}
.cube .out-front{
	transform: translateZ($cube-translate);
	opacity: 1;
}
.cube .out-back{
	transform: translateZ(-$cube-translate) rotateY(180deg);
	opacity: 1;

}
.cube .out-left{
	transform: translateX(-$cube-translate) rotateY(-90deg);
	opacity: 1;

}
.cube .out-right{
	transform: translateX($cube-translate) rotateY(90deg);
	opacity: 1;

}
.cube .out-top{
	transform: translateY(-$cube-translate) rotateX(90deg);
	opacity: 1;

}
.cube .out-bottom{
	transform: translateY($cube-translate) rotateX(-90deg);
	opacity: 1;
}
.active .out-front{
	transform: translateZ($cube-translate-active);
	box-shadow: none;
	opacity: 0.5;
}
.active .out-back{
	transform: translateZ(-$cube-translate-active) rotateY(180deg);
	box-shadow: none;
	opacity: 0.5;
}
.active .out-left{
	transform: translateX(-$cube-translate-active) rotateY(-90deg);
	box-shadow: none;
	opacity: 0.5;
}
.active .out-right{
	transform: translateX($cube-translate-active) rotateY(90deg);
	box-shadow: none;
	opacity: 0.5;
}
.active .out-top{
	transform: translateY(-$cube-translate-active) rotateX(90deg);
	box-shadow: none;
	opacity: 0.5;
}
.active .out-bottom{
	transform: translateY($cube-translate-active) rotateX(-90deg);
	box-shadow: none;
	opacity: 0.5;
}

.heart3d {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-shadow: none!important;
  padding-left: 0.5rem;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform-origin: center;
}
.heart3d .rib1,
.heart3d .rib2,
.heart3d .rib3,
.heart3d .rib4,
.heart3d .rib5,
.heart3d .rib6,
.heart3d .rib7,
.heart3d .rib8,
.heart3d .rib9,
.heart3d .rib10,
.heart3d .rib11,
.heart3d .rib12,
.heart3d .rib13,
.heart3d .rib14,
.heart3d .rib15,
.heart3d .rib16,
.heart3d .rib17,
.heart3d .rib18,
.heart3d .rib19,
.heart3d .rib20,
.heart3d .rib21,
.heart3d .rib22,
.heart3d .rib23,
.heart3d .rib24,
.heart3d .rib25,
.heart3d .rib26,
.heart3d .rib27,
.heart3d .rib28,
.heart3d .rib29,
.heart3d .rib30,
.heart3d .rib31,
.heart3d .rib32,
.heart3d .rib33,
.heart3d .rib34,
.heart3d .rib35,
.heart3d .rib36 {
  position: absolute;
  width: .6rem;
  height: .95rem;
  border: solid #f22613;
  border-width: 2px 2px 0 0;
  border-radius: 50% 50% 0 / 40% 50% 0;
}